<template>
  <div class="detail" v-if="detail">
    <PositionBar :crumbs="detail.crumbs" />

    <div class="detail-d">
      <div class="detail-d-l m-b-15">
        <el-card shadow="hover" :body-style="{ padding: '30px' }">
          <div class="d">
            <div class="d-l">
              <img :src="detail.soft.icon" />
            </div>
            <div class="d-c">
              <div class="d-c-1">
                <span>{{ detail.soft.nameFull }} </span>
              </div>
              <div class="d-c-2">
                <span class="tag">{{ detail.soft.typeName }}</span>
                <span>{{ detail.soft.createTime }} 更新</span>
              </div>
              <div class="d-c-3">
                <div class="sm">
                  <span class="sm-title">资源大小：</span>
                  <span class="sm-detail">{{ detail.soft.size }}</span>
                </div>
                <div class="sm">
                  <span class="sm-title">软件语言：</span>
                  <span class="sm-detail">{{ detail.soft.language }}</span>
                </div>
                <div class="sm">
                  <span class="sm-title">资源平台：</span>
                  <span class="sm-detail">{{ detail.soft.platform }}</span>
                </div>
                <div class="sm">
                  <span class="sm-title">授权方式：</span>
                  <span class="sm-detail">{{ detail.soft.authorization }}</span>
                </div>
                <div class="sm">
                  <span class="sm-title">月下载量：</span>
                  <span class="sm-detail">{{ detail.soft.downCount }}</span>
                </div>
              </div>
              <div class="d-c-4">
                <div class="two-icon" @click="gotoMd(tabs[3])">
                  <div class="icon">
                    <i class="fa fa-bolt" aria-hidden="true"></i>
                  </div>
                  <div class="word">
                    <span style="font-size: 16px">高速下载</span>
                    <span style="margin-top: 5px">提速50%以上，优先选择</span>
                    <!-- <span>安装成功可获得500金币</span> -->
                  </div>
                </div>
                <div class="two-icon" @click="gotoMd(tabs[3])">
                  <div class="icon">
                    <i class="fa fa-download" aria-hidden="true"></i>
                  </div>
                  <div class="word">
                    <span style="font-size: 16px">本地下载</span>
                    <!-- <span>安装成功可获得100金币</span> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="d-r">
              <div class="tjzs">
                {{ detail.soft.recommendIndex }}
              </div>
              <div class="stars">
                <el-rate
                  v-model="detail.soft.recommendIndex"
                  disabled
                ></el-rate>
              </div>
              <div class="word">推荐指数</div>
            </div>
          </div>
        </el-card>

        <Advertisement :width="'100%'" class="m-bt-15" />

        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="tabs">
            <div
              class="tab"
              :class="{ act: act.name == it.name }"
              v-for="it in tabs"
              :key="it.name"
              @click="gotoMd(it)"
            >
              <span>{{ it.name }}</span>
            </div>
          </div>

          <div class="md" id="yyjs">
            <a name="yyjs"></a>
            <span class="mdtitle"> 应用介绍 </span>
            <p v-html="detail.soft.introduce"></p>
          </div>

          <div class="md" id="rjjt">
            <a name="rjjt"></a>
            <span class="mdtitle"> 软件截图 </span>
            <BannerDetail :data="detail.soft.img" />
          </div>

          <div class="md" id="syjc">
            <a name="syjc"></a>
            <span class="mdtitle"> 使用教程 </span>
            <p v-html="detail.soft.usingTutorial"></p>
          </div>

          <div class="md" id="xzdz">
            <a name="xzdz"></a>
            <div class="leftxz">
              <div class="gs">
                <div class="gsxz">
                  <span> 高速下载地址 </span>
                </div>

                <div class="btns">
                  <div v-for="i in 4" :key="i">
                    <button
                      class="button is-warning is-large"
                      @click="
                        downloadUrl(detail.soft[indexToCn[i].key], detail.soft.id)
                      "
                    >
                      高速下载{{ indexToCn[i].name }}
                    </button>
                  </div>
                </div>
              </div>

              <div class="pt">
                <div class="gsxz">
                  <span> 普通下载地址 </span>
                </div>

                <div class="btns">
                  <div v-for="i in 4" :key="i">
                    <button
                      @click="
                        downloadUrl(
                          detail.soft[indexToCn[i].keyI],
                          detail.soft.id,
                          detail.soft[indexToCn[i].keyO],
                        )
                      "
                    >
                      普通下载{{ indexToCn[i].name }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="rightxz">
              <img
                src="https://placeholder.idcd.com/?w=330&h=380&text=330x380"
              />
            </div>
          </div>

          <!-- 
           <div class="md" id="zqjb">
            <span class="mdtitle"> 赚取金币规则 </span>
          </div>
          -->
          <!-- 
          <div class="md" id="wypl">
            <span class="mdtitle"> 网友评论 </span>
          </div>
           -->
        </el-card>
        <div class="web-words">
          <div class="title-box">
            <div class="title">网页评论</div>
          </div>
          <div class="web-words-content">
            <el-input
              type="textarea"
              disabled
              :autosize="{ minRows: 8 }"
              style="width: 860px; margin-top: 24px"
            ></el-input>
          </div>
          <div style="display: flex; justify-content: flex-end">
            <el-button
              type="success"
              style="margin-top: 20px; margin-right: 20px"
              @click="send"
              >发表</el-button
            >
          </div>
          <div class="comment-box">
            <div
              class="comment-item"
              v-for="(item, index) in detail.comment"
              :key="index"
            >
              <div class="comment-user-info">
                <img :src="item.icon" alt="" class="" v-if="item.icon" />
                <div
                  v-else
                  style="
                    border-radius: 50%;
                    border: 2px solid #999;
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;
                  "
                ></div>
                <div>
                  <div
                    style="
                      color: #1d2127;
                      line-height: 20px;
                      font-weight: 600;
                      font-size: 14px;
                    "
                  >
                    {{ item.name || "用户名" }}
                  </div>
                  <div
                    style="color: #93999e; line-height: 20px; font-size: 14px"
                  >
                    {{ item.createTime }}
                  </div>
                </div>
              </div>
              <div class="comment-content">
                {{ item.content }}
              </div>
              <div
                class="reply-box"
                v-if="item.comments.length && item.comments"
              >
                <div v-for="(k, i) in item.comments" :key="i">
                  <div class="comment-user-info">
                    <img v-if="k.icon" :src="k.icon" alt="" class="" />
                    <div
                      v-else
                      style="
                        border-radius: 50%;
                        border: 2px solid #999;
                        width: 40px;
                        height: 40px;
                        margin-right: 10px;
                      "
                    ></div>
                    <div>
                      <div
                        style="
                          color: #1d2127;
                          line-height: 20px;
                          font-weight: 600;
                          font-size: 14px;
                        "
                      >
                        {{ k.name || "用户名" }}
                      </div>
                      <div
                        style="
                          color: #93999e;
                          line-height: 20px;
                          font-size: 14px;
                        "
                      >
                        {{ k.createTime }}
                      </div>
                    </div>
                  </div>
                  <div class="comment-content">
                    {{ k.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="detail-d-r">
        <AboutSoft :data="detail.aboutSoftVos" />

        <SameList class="m-t-15" :data="detail.hotSoftVos" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import PositionBar from "@/components/PositionBar.vue";
import SameList from "@/components/SameList.vue";
import Advertisement from "@/components/Advertisement.vue";
import BannerDetail from "@/components/BannerDetail.vue";
import AboutSoft from "@/components/AboutSoft.vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

const params = ref(useRoute().params);

const detail = ref(null);

axios.get(`/api/download/soft/detail/${params.value.id}.html`).then((res) => {
  detail.value = res.data.data;
});

const send = () => {
  ElMessageBox.alert("暂未开放", "提示", {
    type: "warning",
    "confirm-button-text": "确定",
  });
};
const indexToCn = ref({
  1: {
    name: "一",
    key: "highSpeedUrlOne",
    keyI: "ordinarySpeedUrlOne",
    keyO: "ordinarySpeedOpenUrlOne",
  },
  2: {
    name: "二",
    key: "highSpeedUrlTwo",
    keyI: "ordinarySpeedUrlTwo",
    keyO: "ordinarySpeedOpenUrlTwo",
  },
  3: {
    name: "三",
    key: "highSpeedUrlThree",
    keyI: "ordinarySpeedUrlThree",
    keyO: "ordinarySpeedOpenUrlThree",
  },
  4: {
    name: "四",
    key: "highSpeedUrlFour",
    keyI: "ordinarySpeedUrlFour",
    keyO: "ordinarySpeedOpenUrlFour",
  },
});
const openKey = (key) => {
  window.open(detail.value.soft[key]);
};

const tabs = ref([
  {
    name: "应用介绍",
    href: "#yyjs",
  },
  {
    name: "软件截图",
    href: "#rjjt",
  },
  {
    name: "使用教程",
    href: "#syjc",
  },
  {
    name: "下载地址",
    href: "#xzdz",
  },
]);

const act = ref(tabs.value[0]);

const gotoMd = (it) => {
  act.value = it;
  document.querySelector(it.href).scrollIntoView(true);
};
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  justify-content: flex-start;
  height: 48px;
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    cursor: pointer;
    position: relative;
    // color: @theme-color;
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #93999e;
      line-height: 16px;
    }
  }
  .act {
    &::before {
      position: absolute;
      top: 0;
      content: " ";
      width: 120px;
      height: 0.1px;
      border: 1px solid @theme-color;
    }
    span {
      color: @theme-color;
    }
  }
}

.detail {
  min-height: 500px;

  &-d {
    display: flex;
    justify-content: space-between;

    &-l {
      width: 75%;
      .d {
        display: flex;
        justify-content: space-between;
      }
      .d-l {
        display: flex;
        img {
          width: 173px;
          height: 173px;
          object-fit: cover;
        }
      }

      .d-c {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 20px;

        &-1,
        &-2,
        &-3,
        &-4 {
          display: flex;
        }

        &-1 {
          height: 28px;
          span {
            font-size: 28px;
            font-weight: 600;
            color: #1d2127;
            line-height: 28px;
          }
        }

        &-2 {
          height: 24px;
          margin: 10px 0;
          align-items: center;
          span:first-child {
            border: @theme-color solid 1px;
            color: @theme-color;
          }
          span:last-child {
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #93999e;
            line-height: 12px;
          }
        }

        &-3 {
          flex-flow: wrap;
          flex-wrap: row;
          .sm {
            width: 300px;
            height: 24px;
            display: flex;
            align-items: center;

            &-title {
              font-size: 14px;
              font-weight: 400;
              color: #93999e;
              line-height: 14px;
            }

            &-detail {
              margin-left: 5px;
              font-size: 14px;
              font-weight: 400;
              color: #545759;
              line-height: 14px;
            }
          }
        }

        &-4 {
          display: flex;
          margin-top: 15px;
          .two-icon {
            width: 200px;
            height: 48px;
            border-radius: 4px;
            background: @theme-color;
            margin-right: 20px;
            display: flex;
            align-items: center;
            color: #fff;
            cursor: pointer;
            .icon {
              margin-left: 20px;
            }

            .word {
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 10px;
              span:first-child {
                font-size: 14px;
                font-weight: 500;
                color: #ffffff;
                line-height: 14px;
              }
              span:last-child {
                // margin-top: 5px;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                line-height: 12px;
              }
            }
          }
        }
      }

      .d-r {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .tjzs {
          font-size: 24px;
          font-weight: 500;
          color: #f9b002;
          line-height: 24px;
        }
        .stars {
          margin: 5px 0;
          /deep/.el-rate__icon {
            margin-right: 0px;
          }
        }
        .word {
          font-size: 10px;
          font-weight: 400;
          color: #93999e;
          line-height: 10px;
        }
      }
    }

    &-r {
      width: 24%;
    }
  }

  .md {
    display: flex;
    flex-direction: column;
    padding: 20px;
    .mdtitle {
      font-size: 20px;
      font-weight: bold;
      color: #1d2127;
      line-height: 20px;
      margin: 10px 0;
    }
  }
}

#xzdz {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .leftxz {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .rightxz {
    display: flex;
    justify-content: flex-end;
    width: 49%;
    img {
      cursor: pointer;
      width: 330px;
      height: 380px;
      border-radius: 8px;
      object-fit: cover;
    }
  }

  .gsxz {
    margin: 10px 0;
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #1d2127;
      line-height: 16px;
    }
  }
  .gs {
    .btns {
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
    }

    button {
      margin: 10px 0;
      width: 230px;
      height: 44px;
      color: #fff;
      background: linear-gradient(180deg, #f9b002 0%, #f99d0c 100%);

      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 14px;
    }
  }

  .pt {
    .btns {
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
    }

    button {
      margin: 10px 0;
      width: 230px;
      height: 44px;
      color: #fff;
      border: none;
      background: #f5f7f8;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #545759;
      line-height: 14px;
      cursor: pointer;
    }
  }
}
.web-words {
  width: 898px;
  // min-height: 400px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  .title-box {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    .title {
      font-size: 20px;
      line-height: 50px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1d2127;
    }
  }
  .web-words-content {
    display: flex;
    justify-content: center;
  }
}
.comment-box {
  padding: 20px;
  .comment-item {
    border-bottom: 1px solid #eee;
    padding-top: 20px;
    .comment-user-info {
      display: flex;
    }
    .comment-content {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #545759;
      margin: 12px 0px;
    }
    .reply-box {
      background: #f5f7f8;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
